<template lang="">
  <div class="person">
    <el-card shadow="never">
      <div class="person__content">
        <el-card shadow="never" :body-style="{ padding: '20px' }" class="left">
          <div class="person_info">
            <!-- 头像 -->
            <div class="avatar-container">
              <img class="avatar" :src="userInfo.icon">
            </div>
            <!-- 用户名 -->
            <div class="userName">
              {{ userInfo.username }}
            </div>
            <!-- 职位 -->
            <div class="job_title">
              <i class="el-icon-collection-tag" /> 交互专家
            </div>
            <!-- 部门 -->
            <div class="section">
              <i class="el-icon-s-check" />
              阿里巴巴－AliOS事业群－斑马平台部－地图技术部－UED
            </div>
            <div class="address">
              <i class="el-icon-location-outline" /> 北京市 朝阳区 绿地中心
              阿里中心A座
            </div>
          </div>
          <!-- 标签 -->
          <div class="tags">
            <div class="tags__title">标签</div>
            <div class="tags__wrapper">
              <el-tag
                v-for="tag in tags"
                :key="tag"
                closable
                :disable-transitions="false"
                class="tag-item"
                @close="handleClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                v-if="inputVisible"
                ref="saveTagInput"
                v-model="inputValue"
                class="input-new-tag"
                size="mini"
                placeholder="标签"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              />
              <div v-else class="addIcon">
                <i class="el-icon-plus" @click="showInput" />
              </div>
            </div>
          </div>
          <div class="teams">
            <div v-for="item in teamList" :key="item.id" class="teams__item">
              <img :src="item.icon" class="teams__item__icon">
              <div>
                {{ item.name }}
              </div>
            </div>
          </div>
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '20px' }" class="right">
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="文章" name="article">
              <div class="article_list">
                <div
                  v-for="item in article_list"
                  :key="item.id"
                  class="article_item"
                >
                  <div class="article_item__title">{{ item.title }}</div>
                  <div class="article_item__tags">
                    <el-tag
                      v-for="(tag, index) in item.tags"
                      :key="index"
                      size="mini"
                      class="tag"
                    >{{ tag }}</el-tag>
                  </div>
                  <div class="article_item__content">{{ item.article }}</div>
                  <div class="article_item__other">
                    {{ item.author }} &nbsp; &nbsp;&nbsp; &nbsp;{{ item.time }}
                  </div>
                  <div class="article_item__footer">
                    <span>
                      <i class="el-icon-s-flag" /> {{ item.collection }}
                    </span>
                    <span class="line">|</span>
                    <span> <i class="el-icon-thumb" /> {{ item.good }} </span>
                    <span class="line">|</span>
                    <span>
                      <i class="el-icon-chat-line-round" /> {{ item.comment }}
                    </span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="项目" name="project">
              <el-row :gutter="20" class="project_list">
                <el-col
                  v-for="(item, index) in project_list"
                  :key="index"
                  :span="6"
                  class="project_item"
                >
                  <el-card shadow="hover">
                    <img :src="item.img" class="project_item__pic">
                    <div class="project_item__title">{{ item.title }}</div>
                    <div class="project_item__content">
                      {{ item.content }}
                    </div>
                    <div class="project_item__footer">
                      <div class="time">
                        {{ item.time }}
                      </div>
                      <div class="visitors">
                        <img
                          v-for="(img, index) in item.visitorList"
                          :key="img"
                          :src="img"
                          class="avater"
                          :style="`z-index: ${10 - index}`"
                        >
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getUserInfo } from '@/utils/auth'
import { article_list, project_list } from './mockData'
export default {
  data() {
    return {
      userInfo: {}, // 用户信息
      tags: ['卷王', '007', '大佬'],
      inputVisible: false,
      inputValue: '',
      article_list,
      project_list,
      activeName: 'article',
      teamList: [
        {
          name: '达摩研究院',
          icon: require('@/assets/images/damo.png')
        },
        {
          name: 'AliOS事业部',
          icon: require('@/assets/images/alios.png')
        },
        {
          name: '斑马车载系统开发部',
          icon: require('@/assets/images/banma.png')
        },
        {
          name: '导航地图研发部',
          icon: require('@/assets/images/map.png')
        },
        {
          name: '车载多媒体开发组',
          icon: require('@/assets/images/music.png')
        }
      ]
    }
  },
  created() {
    this.userInfo = getUserInfo()
  },
  methods: {
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleTabClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style lang="scss" scope>
.person {
  margin: 30px;
  &__content {
    display: flex;
    .left {
      width: 32%;
      .person_info {
        padding: 10px 0 20px;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
        .avatar-container {
          text-align: center;
          margin-bottom: 10px;
          .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
          }
        }
        .userName {
          font-size: 20px;
          text-align: center;
          margin: 15px 0;
        }
        .job_title,
        .section,
        .address {
          font-size: 13px;
          margin-top: 10px;
        }
      }

      .tags {
        margin-top: 10px;
        padding: 10px 0 20px;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
        &__title {
          font-size: 16px;
        }
        &__wrapper {
          display: flex;
          justify-content: first baseline;
          align-items: center;
          margin-top: 10px;
          .tag-item {
            margin: 0 8px 8px 0;
            height: 20px;
            padding: 0 5px;
            line-height: 19px;
          }
          .addIcon {
            margin-left: 10px;
            margin-bottom: 8px;
            cursor: pointer;
          }

          .input-new-tag {
            width: 90px;
            height: 31px;
            margin-left: 10px;
            vertical-align: bottom;
            margin-bottom: 8px;
          }
        }
      }

      .teams {
        width: 100%;
        display: flex;
        justify-content: first baseline;
        flex-wrap: wrap;
        padding: 10px 0 20px;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.06);

        &__item {
          width: 49%;
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          &__icon {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin-right: 10px;
            background-color: rgba(0, 0, 0, 0.08);
          }
        }
      }
    }

    .right {
      width: 67%;
      margin-left: 10px;

      .article_list {
        .article_item {
          padding-bottom: 10px;
          margin-bottom: 20px;
          border-bottom: 1px dashed grey;
          &__title {
            margin-bottom: 20px;
          }
          &__tags {
            margin-bottom: 20px;
            .tag {
              margin-right: 10px;
            }
          }
          &__content {
            font-size: 14px;
            margin-bottom: 10px;
          }
          &__other {
            text-align: right;
            color: rgba(0, 0, 0, 0.45);
            font-size: 13px;
          }
          &__footer {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
            .line {
              margin: 0 10px;
            }
          }
        }
      }

      .project_list {
        width: 100%;
        .project_item {
          margin-bottom: 20px;
          .el-card__body {
            padding: 0;
          }
          &__pic {
            width: 100%;
            height: 150px;
            vertical-align: middle;
          }
          &__title {
            margin: 5px;
          }
          &__content {
            margin: 5px;
            font-size: 12px;
          }
          &__footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            font-size: 12px;
            color: gray;
            margin-left: 5px;
            .visitors {
              width: 100px;
              height: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
              .avater {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-left: -10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
